<template>
	<view class="dispatchPerson">
		<!-- 资源调度 --- 选择人员 -->
		<view class="person">
			<view class="nav-item">
				<view class="name">劳务人员</view>
				<view class="value">
					  <u--input
						type="number"
						class="input"
					    placeholder="请输入劳务人员数量"
						:disabled="isLaborPerson"
						v-model="laborPersonnel"
						@blur="laborPersonnelBlur"
					  ></u--input>
				</view>
			</view>
			
			<view class="nav-item">
				<view class="name">抢险人员</view>
				<view class="value">
					 <u--input
						prefixIcon="search"
						prefixIconStyle="font-size: 26px;color: #909399"
						class="input"
					    placeholder="请输入姓名"
						v-model="rescuePersonnelName"
						@change="rescuePersonnelNameChange"
					  ></u--input>
				</view>
			</view>
			
			<view class="uniCollapse">
				<uni-collapse class="collapse">
					<checkbox-group @change="checkboxChange">
						<uni-collapse-item title-border="show" v-for="item in personList" :key="item.name" :title="item.name">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.name }}
									</view>
									<view class="right">
										
									</view>
								</view>
							</template>
							<view class="col-item" v-for="value in item.children" :key="value.id">
								<label class="label">
									<view class="name">{{ value.name }}</view>
									<view class="phone">{{ value.phone }}</view>
									<checkbox :value="value.tempId" :checked="value.isChecked" :disabled="isPersonDisabled" class="checkbox color round"></checkbox>
								</label>
							</view>
						</uni-collapse-item>
					</checkbox-group>
				</uni-collapse>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import { getShoppingCartPersonList, getPersonList, getShoppingCartBatchDelete, getShoppingCartBatchSave, getShoppingCartLaborPerson, person_getListByOrgIdNoProjectId } from  "@/api/emergency/emergencyDispatch.js";
	import mixins from "@/utils/mixins.js"
	import uniCollapse from "./uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default {
		name: "dispatchPerson",
		mixins: [mixins],
		components: {
			uniCollapse
		},
		props: {
			eventId: {
				type: Number,
				default: null,
				required: true,
			},
			stationList: {
				default: ()=> [],
				required: true,
			}
		},
		data() {
			return {
				personList: [],         // 最全的人员数量
				selectPersonList: [],   // 已经选中的人员
				selectPersonIds: [],    // 选中人员的id
				checkboxCheck: [],      // checkbox选中的 id数组
				rescuePersonnelName: "",  // 抢险人员名称
				laborPersonnel:"",        // 劳务人员
				laborPersonObj: {},       // 劳务人员详情 里面有id
				isPersonDisabled: false,  // 是否禁用,  在发送请求时, 不允许在此发送
				isLaborPerson: false,     // 是否禁用,  在发送请求时, 不允许在此发送
			}
		},
		mounted() {
			console.log(this.eventId);
			this.getSelectPerson()
			this.getLaborPerson()
		},
		methods: {
			// 获取人员列表
			async getSelectPerson(){
				let res = await getShoppingCartPersonList({ eventId: this.eventId })
				// 获取选中的人员 并添加选中标识
				this.selectPersonList = res.result.filter(item=>{
					// 判断 this.rescuePersonnelName 是否有值
					if(this.rescuePersonnelName){
						return (item.name).includes(this.rescuePersonnelName)
					}else{
						return true
					}
				})
				this.selectPersonList.forEach(item=>{
					this.$set(item, "isChecked", true)
				})
				// 选中人员的id
				this.selectPersonIds = res.result.map(item=> item.id)
				
				// 从字典表中获取人员类型 把 一般劳务工 过滤掉
				// 提取出id, 
				// let ids = this.$store.getters.dictMap.person_type
				// .filter((item) => item.name !== "一般劳务工")
				// .map((value) => value.id)
				// .join(",");
				let ids = "204,205,206"
				let _query = {
					currPage: 1,
					pageSize: 10000,
					params: {
						id: this.$store.getters.userName.orgId,
						bFree: true,
						typeIds: ids,
						stationTypeIds:[102,104],
						stationIds: [],
						name: this.rescuePersonnelName,
					},
				};
				let per = await person_getListByOrgIdNoProjectId(_query)
				let perList = per.result.list.filter(item=> item.state === 0)
				perList.forEach(val=>{
					this.$set(val,'isChecked',false)
				})
				let list = [...this.selectPersonList, ... perList].map(item=>({...item,tempId: +item.id + ""}))
				// 格式化数据
				this.personList = this.arrayFilter(this.filterUnique(list), "stationName", 'num')
				console.log(this.personList,'personList3333');
			},
			//根据数组中对象的某个属性值进行去重
			filterUnique(arr) {
				const res = new Map()
				return arr.filter(item => !res.has(item.id) && res.set(item.id,1))
			},
			// checkbox change事件 
			// 保存删除抢险人员
			async checkboxChange(e){
				if(this.isPersonDisabled) return
				this.isPersonDisabled = true
				// list checkbox选中的id数组    list2 选中人员的id
				let list = JSON.parse(JSON.stringify(e.detail.value.map(item=> +item)))
				let list2 = this.selectPersonList.map((item)=> item.id);
	
				// // 取list 和list2 中 不同的
				let tempList = list.filter((item) => {
					return !list2.find((value) => item === value);
				});
				
				// 取 list2 和 list 中相同的
				let tempList2 = list2.filter((item) => {
					return !list.find((value) => item === value);
				});
	
				// tempList2 和 this.selectPersonList 循环
				// item === value.id 时   提取value.eventCostId
				let delIds = [];
				tempList2.forEach((item) => {
					this.selectPersonList.forEach((value) => {
						if (item === value.id) {
							// 把 eventCostId 提取出来(用于删除 getDeviceBatchDelete 接口)
							delIds.push(value.eventCostId);
						}
					});
				});
	
				// tempList2(delIds) 就是要调 getDeviceBatchDelete 接口 删除的
				// tempList 就是要调 getDeviceBatchSave 接口 保存的
				// console.log(delIds, tempList);
	
				if (delIds.length > 0) {
					let del = await getShoppingCartBatchDelete(delIds);
				}
	
				let arr = []
				if (tempList.length > 0) {
					tempList.forEach((item) => {
						let obj = {
							eventId: this.eventId,
							type: "person",
							itemId: item,
						};
						arr.push(obj);
					});
				}
				if (arr.length > 0) {
					let res3 = await getShoppingCartBatchSave(arr);
				}
				await this.getSelectPerson()
				// 调用购物车列表接口, 刷新 购物车数量
				await this.$emit("shoppingList", )
				this.isPersonDisabled = false
			},
			
			// 抢险人员change事件
			// 抢险人员模糊查询
			rescuePersonnelNameChange(val){
				if(!val) {
					this.rescuePersonnelName = null
				}
				this.getSelectPerson()
			},
			
			
			// 劳务人员 change事件
			// 保存劳务人员
			async laborPersonnelBlur(value){
				if(this.isLaborPerson) return
				this.isLaborPerson = true
				let obj = {type: "labor_person", num: this.laborPersonnel, eventId: this.eventId,}
				if(this.laborPersonObj && this.laborPersonObj.id){
					obj.id = this.laborPersonObj.id
				}
				let res = await getShoppingCartBatchSave([obj])
				await this.getLaborPerson()
				// 调用购物车列表接口, 刷新 购物车数量
				await this.$emit("shoppingList", +this.laborPersonnel, "laborNum")
				this.isLaborPerson = false
			},
			
			
			// 回显劳务人员
			async getLaborPerson(){
				let res = await getShoppingCartLaborPerson({eventId: this.eventId})
				this.laborPersonnel = res.result.laborPerson ? res.result.laborPerson.num : ""
				this.laborPersonObj = res.result.laborPerson 
			},
			
			/**
			* @description:  list 数组根据 stationName分组 num统计数量
			* @param {type}  list: 需要处理的数组  (原数组)
			* @param {type}  stationName: 用于判断相同的键名 
			* @return:       返回值: 数组
			*/
			arrayFilter(list, stationName){
				let obj = {}
				let newList = []
				for (let i = 0; i < list.length; i++) {
					let item = list[i]
					let str = item[stationName]
					if(obj[str]){
						obj[str].push(item)
					}else{
						obj[str]=[]
						obj[str].push(item)
					}
				}
				// 对象转数组
				for (let key in obj) {
					let value = obj[key]
					let newkey = {name: key, num:value.length, children: value}
					newList.push(newkey)
				}
				return newList
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dispatchPerson{
		height: 100%;
		background-color: #fff;
		padding: 0rpx 32rpx;
		.person{
			.nav-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				line-height: 120rpx;
				border-bottom: 2rpx solid #E2E5ED;
				.name{
					font-size: 32rpx;
					font-family: Noto Sans Thai UI-Medium, Noto Sans Thai UI;
					font-weight: 500;
					color: #445469;
					margin-left: 40rpx;
					width: 260rpx;
					
				}
				.value {
					/* #ifdef MP-WEIXIN */
						width: 62%;
					/* #endif */
				}
				.input{
					width: 360rpx;
					font-size: 32rpx !important;
				}
			}
		}
		.collapse{
			.col-item{
				.label{
					display: flex;
					height: 120rpx;
					line-height: 120rpx;
					border-bottom: 2rpx solid #E2E5ED;
					padding: 0rpx 55rpx;
					.name{
						margin-right: 45rpx;
					}
					.phone{
						flex: 1;
					}
				}
			}
		}
	}
</style>